<template>
  <div class="container">
    <el-card shadow="always" :body-style="{ padding: '20px', height: '100vh' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-button type="primary" size="small" @click="download()"
            >导出数据</el-button
          >
        </el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-divider direction="horizontal" content-position="left"></el-divider>

      <el-table :data="list" border stripe>
        <el-table-column
          type="index"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="user"
          align="center"
          label="用户"
        ></el-table-column>
        <el-table-column align="center" label="提交时间">
          <template slot-scope="{ row }">
            {{ row.create_time | formatDate }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="danger"
              size="mini"
              @click="delSurveySubmit(row)"
              plain
              >删除</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="surveySubmitDetail(row)"
              plain
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog
      title="详情"
      :visible.sync="detailVis"
      width="80%"
      top="10px"
      @close="
        detailVis = false;
        previewClose();
      "
    >
      <el-form
        disabled
        :model="{ formList }"
        ref="form"
        label-width="0"
        size="small"
      >
        <item
          v-for="(item, index) in formList"
          :node="item"
          :index="index"
          :key="'item_' + index"
          :showmessage="true"
          @currentNode="() => {}"
          @deleteNode="() => {}"
          @Node="() => {}"
        ></item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import item from "../edit/item.vue";
import { getSurveySubmit, getSurvey, delSurveySubmit } from "@/api/form";
import { formatDate } from "@/filters/index";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  components: { ElImageViewer, item },
  filters: {
    formatDate,
  },
  data() {
    return {
      id: 25,
      list: [],
      previewList: [],
      formList: [],
      t: 0,
      detailVis: false,
    };
  },

  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.getSurveySubmit();
    }
  },

  methods: {
    getSurveySubmit() {
      getSurveySubmit(this.id).then((res) => {
        this.list = res;
      });
    },
    async download(id, submit_count) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        let list = await getSurveySubmit(this.id);
        let { text } = await getSurvey(this.id);
        let survey_data = JSON.parse(text);
        if (!list.length) {
          loading.close();
          this.$message.warning("没有已填写的问卷");
          return;
        }
        let filterVal = [];
        let answers = [];
        let header = [];
        for (let i = 0; i < list.length; i++) {
          answers.push(JSON.parse(list[i].text));
        }

        survey_data.map((i) => {
          header.push(i.num);
          filterVal.push(i.id);
        });

        import("@/vendor/Export2Excel").then((excel) => {
          const list = answers;
          const data = this.formatJson(filterVal, list);
          console.log(data);
          excel.export_json_to_excel({
            header: header,
            data,
            filename: "测试",
            autoWidth: true,
            bookType: "xlsx",
          });
          loading.close();
        });
      } catch (error) {
        loading.close();
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => {
        return filterVal.map((k) => {
          for (let l = 0; l < v.length; l++) {
            let j = v[l];
            if (k == j.id) {
              let a = JSON.stringify(j.answer)
                .replace("[", "")
                .replace("]", "")
                .replace(/\"/g, "");
              let text = null;
              if (j.other) {
                for (let x = 0; x < j.answer.length; x++) {
                  for (let y = 0; y < j.options.length; y++) {
                    if (
                      j.answer[x] == j.options[y].value &&
                      j.options[y].type &&
                      j.options[y].type == "other"
                    ) {
                      text = "  (" + j.other + ")";
                    }
                  }
                }

                for (let y = 0; y < j.options.length; y++) {
                  if (
                    j.answer == j.options[y].value &&
                    j.options[y].type &&
                    j.options[y].type == "other"
                  ) {
                    text = "  (" + j.other + ")";
                  }
                }
              }

              return a + (text ? text : "");
            } else if (l == v.length - 1) {
              return "";
            }
          }
        });
      });
    },
    delSurveySubmit(row) {
      delSurveySubmit(row.id).then((res) => {
        this.getSurveySubmit();
        this.$message.success("删除成功");
      });
    },
    surveySubmitDetail(data) {
      document.body.style.overflowY = "hidden";
      this.detailVis = true;
      this.formList = JSON.parse(data.text);
    },
    previewClose(){
      document.body.style.overflowY="auto"
    }
  },
};
</script>

<style scoped>
.container >>> .el-scrollbar__wrap {
  height: 100%;
  overflow-x: hidden;
}
.container >>> .is-horizontal {
  display: none;
}
.container >>> .el-form-item {
  cursor: default;
  border: none;
  padding: 0 13px;
  float: left;
  margin: 10px 0;
  position: relative;
}

.container >>> .el-form-item:hover {
  background: none;
}

.container >>> .el-col > .el-icon-delete {
  color: #f56c6c;
  position: absolute;
  right: 0;
  top: -10px;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
.container >>> .el-dialog__body {
  overflow: auto;
  flex: 1;
}
.container >>> .el-dialog {
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
</style>
